<template>
  <div class="mobile-contact">
    <div class="contact-title f f-jc mb20">
      <div>联系我们</div>
    </div>
    <div class="contact-info">
      <div class="contact-map"></div>
      <div class="contact-from">
        <div class="contact-from-box">
          <Title
            block="#4580dd"
            block-width="2"
            left="18"
            title="让我们联系您"
            color="#0e0b31"
            bold="700"
            class="mb30"
          />
          <div v-slide-plus class="form-item">
            <div class="form-label">名字</div>
            <div class="form-input">
              <el-input v-model="editFrom.name" maxlength="20" placeholder="Full Name" />
            </div>
          </div>
          <div v-slide-plus class="form-item">
            <div class="form-label">手机</div>
            <div class="form-input">
              <el-input
                v-model="editFrom.phonenumber"
                maxlength="11"
                placeholder="Telephone Number"
              />
            </div>
          </div>
          <div v-slide-plus class="form-item">
            <div class="form-label">邮箱</div>
            <div class="form-input">
              <el-input v-model="editFrom.email" maxlength="20" placeholder="Email" />
            </div>
          </div>
          <div v-slide-plus class="form-item">
            <div class="form-label">描述</div>
            <div class="form-input">
              <el-input
                v-model="editFrom.remark"
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 7 }"
                maxlength="200"
                show-word-limit
                placeholder="Tell us about your project"
              />
            </div>
          </div>
          <div
            v-slide-plus
            class="form-item-btn"
            :class="{ disabled: submiting }"
            @click="handleSubmit"
          >
            {{ submiting ? "提交中..." : "提 交" }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Toast } from "vant";
import { addLeaveWord } from "@/api/contact";
const route = useRoute();

const editFrom = reactive({
  name: "", // 名字
  email: "", // 邮箱
  phonenumber: "", // 手机
  remark: "", // 描述
  title: "联系我们", // 标题
});
const submiting = ref(false); // 提交中

onMounted(() => {
  if (route.query && route.query.title) {
    editFrom.title = decodeURIComponent(route.query.title as string);
  }
});

// 提交
const handleSubmit = () => {
  if (submiting.value) return;
  if (editFrom.name == "") {
    Toast("请输入名字");
    return;
  }
  if (editFrom.phonenumber == "") {
    Toast("请输入手机");
    return;
  }
  // 验证手机号
  if (!/^1[3456789]\d{9}$/.test(editFrom.phonenumber)) {
    Toast("请输入正确的手机号");
    return;
  }
  if (editFrom.remark == "") {
    Toast("请输入描述");
    return;
  }
  if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(editFrom.email)) {
    Toast("请输入正确的邮箱");
    return;
  }
  submiting.value = true;
  Toast.loading({
    message: "提交中...",
    forbidClick: true,
    duration: 0,
  });
  addLeaveWord(editFrom)
    .then((res: any) => {
      if (res.code == 200) {
        Toast.success("提交成功");
        clearFrom();
      } else {
        Toast.fail(res.msg);
      }
    })
    .finally(() => {
      setTimeout(() => {
        submiting.value = false;
      }, 1000);
    });
};

// 清空表单
const clearFrom = () => {
  editFrom.name = "";
  editFrom.email = "";
  editFrom.phonenumber = "";
  editFrom.remark = "";
  editFrom.title = "";
};
</script>
<style lang="scss" scoped>
.mobile-contact {
  width: 100%;
  height: 100%;
  background: url("~@/assets/contact/contact-line.png") no-repeat;
  background-size: 100% 27.5625rem;
  padding-top: 8.75rem;
  box-sizing: border-box;
  .contact-title {
    width: 100%;
    font-size: 3.375rem;
    font-weight: 700;
    color: #0f0b33;
    position: relative;
    > div {
      z-index: 1;
    }
    &::after {
      content: "CONTACT US";
      font-size: 80%;
      background: linear-gradient(
        180deg,
        rgba(135, 133, 153, 0.31) 0%,
        rgba(135, 133, 153, 0) 100%
      );
      position: absolute;
      bottom: -1.25rem;
      color: transparent;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      z-index: 0;
    }
  }
  .contact-info {
    padding: 1.25rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .contact-map {
      width: 100%;
      height: 12.5rem;
      background: url("https://img.js.design/assets/img/66b5da5d6902e7da25caaf85.png#b52dea58b33204f57f22634be050261d")
        no-repeat;
      background-size: 100%;
      margin-bottom: 1.25rem;
    }
    .contact-from {
      width: 100%;
      background-color: #fff;
      &-box {
        height: 100%;
        .form-item {
          margin-bottom: 1.25rem;
          .form-label {
            font-size: 0.875rem;
            color: #0e0b31;
            margin-bottom: 0.875rem;
          }
          .form-input {
            width: 100%;
            min-height: 3.125rem;
            background: rgba(231, 231, 235, 0.48);
            display: flex;
            .el-input,
            .el-textarea {
              min-height: 100%;
              background-color: transparent;
              box-shadow: none;
              border: none;
              outline: none;
              font-size: 0.875rem;
              color: #0e0b31;
            }
          }
        }
        .form-item-btn {
          width: 100%;
          height: 3.375rem;
          background-color: #4580dd;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          font-size: 0.875rem;
          font-weight: 700;
          margin-top: 2.75rem;
          &:active {
            background-color: #3360ad;
          }
        }
        .disabled {
          background-color: #ccc;
          &:hover {
            cursor: not-allowed;
            background-color: #ccc;
          }
          &:active {
            background-color: #ccc;
          }
        }
      }
    }
  }
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-input__count) {
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  resize: none;
}
</style>
